<template>
	<div id="visit_record" class="container">
		<div class="content">
			<!-- <div class="title">{{title}}</div> -->
			<div class="panel">
				<div class="condition">
					<div class="row_one">
						<span class="condition_name">线索状态</span>
						<el-select v-model="param.visitClueStatus"
								   clearable style="width:1.8rem" placeholder="全部状态" >
						    <el-option v-for="item in clueStatus" :key="item.value"
						      		   :label="item.name" :value="item.value">
						    </el-option>
						</el-select>
						&emsp;
						  
						<span class="condition_name">跟进日期</span>
						<el-date-picker v-model="visitDate" @change="visitChange()"
						      style="width: 2.6rem;" type="daterange"
						      align="center"  unlink-panels range-separator="至"
						      start-placeholder="开始日期" end-placeholder="结束日期"
						      value-format= "yyyy-MM-dd" :picker-options="pickerOptions">
						</el-date-picker>
				    	&emsp;
				    	
				    	<el-input style="width: 3.5rem;" placeholder="搜索 孩子姓名/跟进人" clearable
			   				 		  v-model="param.likeName"  class="input_search" maxlength="100">
			  			</el-input>
			  			&emsp;
			  			
			  			<div class="search_btn" @click="search()" v-if="hasApi('visitList')">搜索</div>
						
					</div>
				</div>
				
				<div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 2.5rem;">跟进日期</td>
								<td style="width: 2.5rem;">下次沟通日期</td>
								<td style="width: 3.5rem;">沟通内容</td>
								<td style="width: 1.5rem;">线索状态</td>
								<td style="width: 3rem;">孩子姓名</td>
								<td style="width: 2rem;">跟进人</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in recordList">
								<td>{{item.visitTime}}</td>
								<td>{{item.nextVisitTime}}</td>
								<td>{{item.visitContent}}</td>
								<td>{{clueStatusMap[item.clueStatus]}}</td>
								<td>
									<template v-if="item.clueInfo">
										<div class="name" :class="item.clueInfo.gender==2? 'name_girl' : ''"></div>
										{{item.clueInfo.realName}}
										{{item.clueInfo.parentData&&item.clueInfo.parentData[0]? '('+item.clueInfo.parentData[0].phone+')' : ''}}
									</template>
								</td>
								<td>{{item.executeUserName}}</td>
							</tr>
						</tbody>
					</table>
				</div>
				<el-pagination
			      layout="total, sizes, prev, pager, next, jumper"
			      :current-page="param.currPage"
			      @size-change="pageSizeChange"
		      	  @current-change="pageIndexChange"
			      :total="count">
			    </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>

var vm,dict,user;
export default {
	components : {
		
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				visitTime : "",
				visitClueStatus : "",
				likeName : "",
				campusId : this.$store.state.campusId,
				currPage : 1,
				pageSize : 10
			},
			visitDate : null,
			count : null,
			clueStatus : null,
			clueStatusMap : null,
	        recordList : [],
	        pickerOptions: {
	          shortcuts: [{
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setDate(start.getDate()-6);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setMonth(start.getMonth()-1);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近三个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setMonth(start.getMonth()-3);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一年',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setFullYear(start.getFullYear()-1);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	        }
//	        userMap : {}
		}
	},
	methods : {
		search : function(currPage) {
			vm.param.currPage = currPage || 1;
			
			api.visitList(vm.param).then(function(data){
				vm.recordList = data.list;
				vm.count = data.totalCount;
			})
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
		},
		visitChange : function() { //回访日期改变
			vm.param.visitTime = (vm.visitDate? vm.visitDate[0]+"/"+vm.visitDate[1] : "");
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	}
	},
	mounted : function() {
		vm.search()
	},
	created : function() {
		vm = this;
		//获取用户和数据字典对象
//		user = tool.getItem(lsKey.user,true);
		dict = tool.getItem(lsKey.dict,true);
		
		vm.clueStatus = dict["clue_status"];
		vm.clueStatusMap = toMap(dict["clue_status"]);
		
//		api.userListByCampus({campusId : user.campusId}).then(function(data) {
//			data.userList.forEach(function(item) {
//				vm.userMap[item.userId] = item.userName;
//			})
//		})
	}
}

function toMap(arry) {
	var obj = {};
	arry.forEach(function(item) {
		obj[item.value] = item.name;
	});
	return obj;
}
</script>

<style lang="scss">
	#visit_record {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
		
		.el-range-editor {
			padding: 0 0.05rem 0 0.1rem;
		}
		.el-range-separator {
			padding: 0 ;
			width : 10% ;
			line-height: 0.34rem;
			color: #666666;
		}
		.el-range-input {
			font-size: 0.16rem;
			color: #666666;
			height: 0.3rem;
		    position: relative;
		    top: 0.01rem;
		}
		
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
